javascript

2023-04-13 17:16| 来源: 网络整理| 查看: 265

最近在公司搬砖，遇到一个前端问题，可难为死我这个CRUD仔了。

问题1

点击下载图片的时候，报下面这种跨域的错误，

Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX

问题是我们的图片服务器已经配置了CORS规则

问题2

展示的图片的时候，明明图片内容已经变化了，但是展示出来的图片还是原来的图片。

解决：

在项目中显示图片需要加时间戳，

上传图片修改图片后，如果图片路径名字未有改变，服务器会认为是同一个请求，会用缓存数据代替请求数据，

这个时候需要在图片显示路径后加时间戳

url = url + "?t=" + new Date().getTime(); 虽然问题解决了，问题2用这种方法可以解决显而易见，但是问题1为什么可以这么解决，还是一脸懵逼，希望有大佬看到可以解答一下。更多图片下载方式

图片下载这个也略麻烦，刚开始用a标签，但是a标签点击，浏览器会打开新的窗口展示图片，并不会直接下载到本地，我用了下面两种方法，亲测可用

downloadImg(src, name) { src = src + "?t=" + new Date().getTime(); fetch(src).then((response) => { response.blob().then((myBlob) => { const href = URL.createObjectURL(myBlob); let a = document.createElement("a"); a.href = href; a.download = name; a.click(); }); }); }, downloadImg: function (imgSrc, name) { const image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) canvas.toBlob((blob) => { const url = URL.createObjectURL(blob) const a = document.createElement('a') a.download = name || 'photo' a.href = url a.click() a.remove() URL.revokeObjectURL(url) }) } image.src = imgSrc },

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章